<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数式组件</title>
</head>
<body>

<div id="test"></div>

<script src="js/react.development.js" crossorigin></script>
<script src="js/react-dom.development.js" crossorigin></script>
<script src="js/babel.js"></script>
<script type="text/babel">
    //1.创建函数式组件
    function Demo() {
        return (
            <div>
                <h2>函数式组件（适用于简单定义）</h2>
                <button type="button">按钮点击</button>
            </div>
        );
    }

    //2.渲染组件到页面
    ReactDOM.render(<Demo/>, document.getElementById("test"));
</script>

<!--JavaScript 类回忆-->
<script type="text/javascript">
    // 定义一个person Class
    class Person {
        // 构造器方法
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }

        // 一般方法（类的原型对象上，供实例使用）
        speak() {
            console.log(`I am${this.name},age is${this.age}`);
        }
    }

    class Student extends Person {
        constructor(name, age, grade) {
            super(name, age);
            this.grade = grade;
        }

        speak() {
            console.log(`I am${this.name},age is${this.age},N J is ${this.grade}`);
        }
    }

    // 实例化person
    let person = new Person('tom', 18);
    console.log(person);
    let student = new Student('ZhangSan', 24, 'Init One');
    console.log(student);
</script>

</body>
</html>